<template>
	<view class="navigation">
		<view class="left">
		
			<view class="item">
					<u-icon name="server-fill" :size="50" color="#333333"></u-icon>
				<view class="text u-line-1">客服</view>
			</view>
			<view class="item car">
				<u-badge class="car-num" :count="0" type="error" :offset="[-3, -6]"></u-badge>
				<u-icon name="shopping-cart" :size="50" color="#333333"></u-icon>
				<view class="text u-line-1">购物车</view>
			</view>
		</view>
		<view class="right">
			<view class="cart btn u-line-1" v-if="isGroup">
				<text class="p-line1">￥{{finalPrice}}</text>
				<text class="p-line2">一人拼</text>  
			</view>
			<view class="cart btn u-line-1" v-else >加入购物车</view>
			<view class="buy btn u-line-1" v-if="isGroup">
				<text class="p-line1">￥{{finalPrice}}</text>
				<text class="p-line2">发起拼购</text>  
			</view>
				<view class="buy btn u-line-1"v-else>立即购买</view>
		</view>
	</view>
</template>

<script>
export default {
	props:{
		isGroup:{
			type:Boolean,
			default:false
		},
		finalPrice:{
		},
	}
};
</script>

<style lang="scss" scoped>
.navigation {
	display: flex;
	justify-content: space-between;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 0 30rpx 0 13rpx;
	.left {
		display: flex;
		font-size: 22rpx;
		padding: 16rpx 0;
		color:#333333;
		flex: 1;
		justify-content: space-around;
		.item {
			margin: 0 17rpx;
			&.car {
				text-align: center;
				position: relative;
				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		justify-content: space-between;
		align-items: center;
		.btn {
			width: 235rpx;
			height: 78rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #ffffff;
		}
		.cart {
			background: linear-gradient(90deg, #F5B770,#ff7900 );
			border-radius: 40rpx  0 0 40rpx;
		}
		.buy {
			background-color: #ed3f14;
			background: linear-gradient(90deg,#FF6034,#FA4930, #EE0A24);
			border-radius: 0 40rpx 40rpx 0;
		}
	}
	.text{
		color: #333333;
	}
	.p-line1{
		font-size:24rpx;
	}
	.p-line2{
		font-size:28rpx;
		margin-top: -5rpx;
	}
}
</style>
